<template>
    <div>

        <el-drawer
                :title="'青兰-队伍' + this.char_recommend_id"
                class="side_app"
                :visible.sync="this.$store.state.open_recommend_char_flag"
                :before-close="()=>{this.$store.commit('set_open_recommend_char_flag', false)}"
                @key="this.$store.state.open_recommend_char_flag"
        >

            <div class="inner">
                <headerButton class="head-inner" @click.native="show_chars = !show_chars">
                    <div :slot="value">队伍角色</div>
                </headerButton>
                <div class="aram_chars" v-show="show_chars">
                    <br><br><br>
                    <div class="options" v-for="i in chars()">{{i}}</div>
                </div>
            </div>
            <br>
            <div class="inner">
                <headerButton class="head-inner" @click.native="property = !property">
                    <div :slot="value">军队管理</div>
                </headerButton>
                <div class="aram_property" v-show="property">
                    <br><br><br>
                    <div class="options">军士管理</div>
                    <div class="options">士气管理</div>
                    <div class="options">战斗历史</div>
                </div>
            </div>
            <br>

            <div class="inner">
                <headerButton class="head-inner" @click.native="event = !event">
                    <div :slot="value">军队事件</div>
                </headerButton>
                <div class="aram_event" v-show="event">
                    <br><br><br>

                    <div class="options">事件1</div>
                    <div class="options">事件2</div>
                    <div class="options">事件3</div>
                    <div class="options">事件4</div>
                    <div class="options">事件5</div>
                    <div class="options">事件6</div>
                    <div class="options">事件7</div>
                    <div class="options">事件8</div>
                    <div class="options">事件9</div>
                    <div class="options">事件10</div>
                    <div class="options">事件1</div>
                    <div class="options">事件2</div>
                    <div class="options">事件3</div>
                    <div class="options">事件4</div>
                    <div class="options">事件5</div>
                    <div class="options">事件6</div>
                    <div class="options">事件7</div>
                    <div class="options">事件8</div>
                    <div class="options">事件9</div>
                    <div class="options">事件10</div>
                    <div class="options">事件1</div>
                    <div class="options">事件2</div>
                    <div class="options">事件3</div>
                    <div class="options">事件4</div>
                    <div class="options">事件5</div>
                    <div class="options">事件6</div>
                    <div class="options">事件7</div>
                    <div class="options">事件8</div>
                    <div class="options">事件9</div>
                    <div class="options">事件10</div>
                    <div class="options">事件1</div>
                    <div class="options">事件2</div>
                    <div class="options">事件3</div>
                    <div class="options">事件4</div>
                    <div class="options">事件5</div>
                    <div class="options">事件6</div>
                    <div class="options">事件7</div>
                    <div class="options">事件8</div>
                    <div class="options">事件9</div>
                    <div class="options">事件10</div>
                </div>
            </div>
            <div class="leftgroup">

                <div class="left-ele" @click="goaway">
                    <div class="goto"></div>
                    <span class="tip">前往</span>
                </div>
                <div class="left-ele">
                    <div class="quartered"></div>
                    <span class="tip">驻扎</span>
                </div>
                <div class="left-ele">
                    <div class="makecity"></div>
                    <span class="tip">城市建立</span>
                </div>

            </div>
        </el-drawer>

    </div>
</template>

<script>
    import headerButton from "@/components/button/headerButton.vue"
    import render_mapper from "../../method/MapAdapter.js"

    export default {
        name: "char_recommend",
        data() {
            return {
                show_chars: false,
                property: false,
                event: false,
                render_mapper:render_mapper,
            }
        },
        props: {
            char_recommend_id: Number
        },
        methods: {
            chars(){
                return this.render_mapper.charts_handler.getCharacters(this.char_recommend_id)
            },
            /**
             * 军队出发
             */
            goaway() {
                // 清空其他状态
                if (this.$store.state.to !== null) {
                    document.getElementsByName("_" + this.$store.state.to)[0].style.borderColor = 'white';
                    this.$store.commit("set_to", null)
                }
                if (this.$store.state.from_ !== null) {
                    document.getElementsByName("_" + this.$store.state.from_)[0].style.borderColor = 'white';
                    this.$store.commit("set_from", null)
                }

                this.$store.commit("set_from", this.char_recommend_id)
                document.getElementsByName("_" + this.char_recommend_id)[0].style.borderColor = '#2A53CD'
                this.$store.commit('set_open_recommend_char_flag', false)
            }
        },
        mounted() {

        },
        components: {
            headerButton
        }
    }
</script>

<style scoped>

    .leftgroup {
        background-image: url("../../assets/buttons/frame.png");
        text-align: center;
        background-size: 100% 100%;
        display: flex;
        width: 60px;
        align-content: center;
        color: white;
        flex-wrap: wrap;
        height: 60px;
        justify-content: center;
        position: absolute;
        top: 100px;
        left: 0px;
        height: calc(100vh - 100px);


    }

    .goto, .quartered, .makecity {
        overflow: hidden;
        /*margin-left: 20px;*/
        background-size: 100% 100%;
        width: 47px;
        margin-top: 30px;
        height: 47px;
    }

    .left-ele {
        user-select: none;
        cursor: pointer;
    }

    .goto {
        background-image: url("../../assets/buttons/go_to.png");
    }

    .makecity {
        background-image: url("../../assets/buttons/makecity.png");

    }

    .quartered {
        background-image: url("../../assets/buttons/quartered.png");
    }

    .options {
        text-align: center;
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .options:hover {
        color: red;
    }

    .inner {
        width: 80%;
        margin-left: calc(((100% - 30px) - 50%) / 2);


    }

    .inner .head-inner {
        width: 100% !important;
        /*margin-bottom: 30px;*/
    }

    .side_app {
        user-select: none;
    }

    /deep/ .el-drawer__header {
        color: black;
    }

    /deep/ .el-drawer {
        background-image: url("../../assets/components-image/background-side (2).png");
        background-size: 100% 100%;
        font-family: 楷体;
    }

    /deep/ .el-drawer :-webkit-scrollbar-track-piece {
        background-color: red !important;
    }

    /deep/ .el-drawer.rtl::-webkit-scrollbar {
        width: 4px;
    }

    /deep/ .el-drawer.rtl::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
    }

    /deep/ .el-drawer.rtl::-webkit-scrollbar-track {
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }


</style>